<template>
  <div>
    <input type="text" v-model="name">
    <div>
      <input type="text" v-model.number="a">
      <input type="text" v-model.number="b">
      <p>sum:{{sum}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      a: 1,
      b: 2
    }
  },
  computed: {
    sum () {
      return this.a + this.b
    }
  },
  // watch 侦听器 可以监视变量和计算属性的变化
  /* 语法: watch: {
            变量名(newVal, oldVal) {
              // 变量变化自动触发
            }
          } 
  */
  watch: {
    name (newV, oldV) {
      console.log('新:',newV,'老:', oldV)
    },
    sum (a,b) {
      console.log('新sum', a, '老sum', b)
    }
  }
}
</script>

<style>

</style>